var imageChoose = {
    obj:"",
    triggerman:"",
    triggerfunction:function(){},
    acquirerInput:"",
    acquirerImg:"",
    lastUrl:"",
    obtainUrl:"",
    uploadUrl:"",
    removeUrl:"",
    mkdirUrl:"",
    obtainPage:"1",
    limit:"3",
    saveUrl:"",
    extendUrl:Array(),
    init:function(){
        this.triggerman.on("click",function(){
            imageChoose.obj = $(this);
            var html = "";
            var url = imageChoose.saveUrl;
            html += "<div id = 'imageChoose' class = 'col-xs-12'>";
            html += "<div class = 'col-xs-9 imageChoose-box'>";
            html += "<div class = 'col-xs-12 imageChoose-box-header'>"
            html += "<div class = 'col-xs-9 imageChoose-box-header-left' style = ''>";
            html += "图片管理"
            html += "</div>";
            html += "<div class = 'col-xs-3 text-xs-right imageChoose-box-header-right'>"
            html += "<button title = '关闭' id = 'close'></button>";
            html += "</div>";
            html += "</div>"
            html += "<div class = 'col-xs-12 imageChoose-box-center'>"
            html += "<button title = '返回上级' id = 'superiorFile' src = '"+imageChoose.lastUrl+"' style = 'margin:9px 5px'></button>";
            html += "<button title = '刷新' id = 'currentFile' src= '.' style = 'margin:9px 5px'></button>";
            html += "<button title = '上传' style = 'margin:9px 5px' id = 'upload'></button>";
            html += "<input type = 'file' id = 'imageFile' name = 'imageFile'>"
            html += "<button title = '新建文件夹' id = 'mkdir' style = 'margin:9px 5px'></button>";
            html += "<button title = '删除' id = 'delete' style = 'margin:9px 5px'></button>";
            html += "</div>";
            html += "<div class = 'col-xs-12' id = 'imgList'>";
            html += "</div>"
            html += "<div class = 'col-xs-12 text-xs-right' id = 'page'>";
            html += "</div>"
            html += "</div>";
            html += "</div>";
            $("body").append(html);
            $("input[name=imageFile]").on("change",function(){
                var data = new FormData();
                $.each($('#imageFile')[0].files, function(i, file) {
                    data.append("upload_file", file);
                });
                console.log(data);
                ajaxFunction.ajax(
                    imageChoose.uploadUrl+"?saveUrl="+$("#currentFile").attr("src"),
                    data,
                    function(json){
                        if(json['success']){
                            alert(json['success']);
                            $("#currentFile").trigger("click");
                        }else{
                            alert(json['error']);
                        }
                    },
                    "json",
                    "post",
                    function(){
                    },
                    true,
                    function(){
                    },
                    true
                );
            })
            ajax(imageChoose.obtainUrl,url)
            $("#upload").on("click",function(event){
                $("#dirName").remove();
                $("input[name=imageFile]").trigger("click");
                event.stopPropagation();
                // alert($("input[name=isDelete]:checked").length)
            })
            $("#superiorFile").on("click",function(evnet){
                $("#dirName").remove();
                ajax(imageChoose.obtainUrl,$(this).attr("src"));
                event.stopPropagation();
            })
            $("#currentFile").on("click",function(event){
                $("#dirName").remove();
                ajax(imageChoose.obtainUrl,$(this).attr("src"));
                event.stopPropagation();
            })
            $("#close").on("click",function(event){
                $("#imageChoose").remove();
                event.stopPropagation();
            })
            $("#delete").on("click",function(event){
                $("#dirName").remove();
                var data = {};
                for(var i=0;i < $("input[name=isDelete]:checked").length;i++){
                    data[i] = ($("input[name=isDelete]:checked").eq(i).attr("src"));
                }
                data['url'] = $("#currentFile").attr("src");
                ajaxFunction.ajax(
                    imageChoose.removeUrl,
                    data,
                    function(json){
                        alert(json['success']);
                        $("#currentFile").trigger("click");
                    },
                    "json",
                    "post",
                    function(){
                    },
                    true,
                    function(){
                    }
                );
                event.stopPropagation();
            })
            $("#mkdir").on("click",function(event){
                $("#dirName").remove();
                var html = "";
                html += "<div class = 'col-xs-3 imageChoose-mkdir-box' id = 'dirName'>";
                html += "<div class = 'col-xs-12 imageChoose-mkdir-box-header'>新建文件夹</div>";
                html += "<div class = 'col-xs-12 imageChoose-mkdir-box-content'><input type = 'text' placeholder = '新建文件夹' name = 'dirname'><button id = 'addDir'></button></div>";
                html += "</div>";
                $(this).parent().append(html);
                $("#dirName").on("click",function(event){
                    event.stopPropagation();
                })
                $("#addDir").on("click",function(){
                    ajaxFunction.ajax(
                        imageChoose.mkdirUrl,
                        {"url":$("#currentFile").attr("src"),"name":$("input[name=dirname]").val()},
                        function(json){
                            if(json['success']){
                                alert(json['success']);
                                $("#currentFile").trigger("click");
                            }else{
                                alert(json['error']);
                            }
                        },
                        "json",
                        "post",
                        function(){
                            $("#dirName").remove();
                        },
                        true,
                        function(){
                        }
                    );
                })
                event.stopPropagation();
            })
            $("#imgList").on("click",function(){
                $("#dirName").remove();
            })
            $(".imageChoose-box-center").on("click",function(){
                $("#dirName").remove();
            })
        })
    }
}
function ajax(obtainUrl,url){
    if(!url){
        url = '.'
    }
    ajaxFunction.ajax(
        obtainUrl,
        {"url":url,"limit":imageChoose.limit,"page":imageChoose.obtainPage},
        function(json){
            var content = "";
            var page = "";
            $("#currentFile").attr("src",url);
            imageChoose.lastUrl = url.substr(0,url.lastIndexOf('/'));
            $("#superiorFile").attr("src",imageChoose.lastUrl);
            for(var i in json){
                if(i == 'lastPage'){
                }else if(i == 'currentPage'){
                    if(json[i] == 1){
                        page += "<div class = 'col-xs-1 text-xs-center page currentPage'>"+json[i]+"</div>";
                        if(json['lastPage'] > json['currentPage']){
                            page += "<div class = 'col-xs-1 text-xs-center page' page = '"+(parseInt(json['currentPage'])+1)+"'>"+(parseInt(json[i])+1)+"</div>";
                        }
                        if(parseInt(json['lastPage']) > parseInt(json[i])+2){
                            page += "<div class = 'col-xs-1 text-xs-center page ellipsis'>...</div>";
                            page += "<div class = 'col-xs-1 text-xs-center page' page = '"+json['lastPage']+"'>"+json['lastPage']+"</div>";
                        }else if(parseInt(json['lastPage']) == parseInt(json[i])+2){
                            page += "<div class = 'col-xs-1 text-xs-center page' page = '"+json['lastPage']+"'>"+json['lastPage']+"</div>";
                        }
                    }else if(json[i] == json['lastPage']){
                        if(parseInt(json[i])-2 >0){
                            page += "<div class = 'col-xs-1 text-xs-center page' page = '1'>1</div>"
                            if(parseInt(json[i])-3 >0){
                                page += "<div class = 'col-xs-1 text-xs-center page ellipsis'>...</div>";
                            }
                        }
                        if(json['currentPage'] > 1){
                            page += "<div class = 'col-xs-1 text-xs-center page' page = '"+(parseInt(json['currentPage'])-1)+"'>"+(parseInt(json[i])-1)+"</div>";
                        }
                        page += "<div class = 'col-xs-1 text-xs-center page currentPage'>"+json[i]+"</div>";
                    }else if(json[i] == 2){
                        page += "<div class = 'col-xs-1 text-xs-center page' page = '1'>1</div>";
                        page += "<div class = 'col-xs-1 text-xs-center page currentPage'>"+json[i]+"</div>";
                        page += "<div class = 'col-xs-1 text-xs-center page' page = '3'>3</div>";
                        if(parseInt(json[i])+2 < parseInt(json['lastPage'])){
                            page += "<div class = 'col-xs-1 text-xs-center page ellipsis'>...</div>"
                        }
                        page += "<div class = 'col-xs-1 text-xs-center page' page = '"+(parseInt(json['lastPage']))+"'>"+(parseInt(json['lastPage']))+"</div>";
                    }else if(json[i] == json['lastPage']-1){
                        page += "<div class = 'col-xs-1 text-xs-center page' page = '1'>1</div>"
                        if(parseInt(json[i])-3 > 0){
                            page += "<div class = 'col-xs-1 text-xs-center page ellipsis'>...</div>"
                        }
                        page += "<div class = 'col-xs-1 text-xs-center page' page = '"+(parseInt(json[i])-1)+"'>"+(parseInt(json[i])-1)+"</div>";
                        page += "<div class = 'col-xs-1 text-xs-center page currentPage'>"+json[i]+"</div>";
                        page += "<div class = 'col-xs-1 text-xs-center page' page = '"+(parseInt(json['lastPage']))+"'>"+(parseInt(json['lastPage']))+"</div>";
                    }else{
                        page += "<div class = 'col-xs-1 text-xs-center page' page = '1'>1</div>"
                        if(parseInt(json[i]-3 > 0)){
                            page += "<div class = 'col-xs-1 text-xs-center page ellipsis'>...</div>"
                        }
                        page += "<div class = 'col-xs-1 text-xs-center page' page = '"+(parseInt(json[i])-1)+"'>"+(parseInt(json[i])-1)+"</div>";
                        page += "<div class = 'col-xs-1 text-xs-center page currentPage'>"+json[i]+"</div>";
                        page += "<div class = 'col-xs-1 text-xs-center page' page = '"+(parseInt(json[i])+1)+"'>"+(parseInt(json[i])+1)+"</div>";
                        if(parseInt(json[i]+3 < json['lastPage'])){
                            page += "<div class = 'col-xs-1 text-xs-center page ellipsis'>...</div>"
                        }
                        page += "<div class = 'col-xs-1 text-xs-center page' page = '"+(parseInt(json['lastPage']))+"'>"+(parseInt(json['lastPage']))+"</div>";
                    }
                }else{
                    if(json[i].type == "image"){
                        content += "<div class = 'col-xs-2 text-xs-center imageChoose-box-content-image'>";
                        content += "<div class = 'col-xs-12 imgList' src = '"+url+'/'+json[i].name+"' type = 'image' style = 'padding:0'>"
                        content += "<img src = '"+url+'/'+json[i].name+"' style = 'height:100px'>"
                        content += "</div>"
                        content += "<div class = 'col-xs-12 text-xs-center'><input src='"+json[i].name+"' type = 'checkbox' name = 'isDelete' value = '"+json[i].name+"'>"+json[i].name+"</div>"
                    }else{
                        content += "<div class = 'col-xs-2 text-xs-center imageChoose-box-content-file'>";
                        content += "<div class = 'col-xs-12 imgList' type = 'file' src = '"+url+'/'+json[i].name+"' style = 'padding:0'>"
                        content += "<img src = 'image/file.png' style = 'height:100px'>"
                        content += "</div>"
                        content += "<div class = 'col-xs-12 text-xs-center'><input src='"+json[i].name+"' type = 'checkbox' name = 'isDelete' value = '"+json[i].name+"'>"+json[i].name+"</div>"
                    }
                    content += "</div>";
                }
            }
            $("#imgList").html(content);
            $("#page").html(page);
            $(".page").on("click",function(){
                if($(this).attr("page")){
                    imageChoose.obtainPage = $(this).attr("page");
                    ajax(obtainUrl,url);
                }else{
                    return false;
                }
            })
            $(".imgList").on("click",function(){
                if($(this).attr("type") == 'image'){
                    imageChoose.acquirerInput.val($(this).attr("src"));;
                    imageChoose.acquirerImg.val($(this).attr("src"));;
                }else if($(this).attr("type") == 'file'){
                    url = $(this).attr("src");
                    imageChoose.obtainPage = 1;
                    ajax(obtainUrl,url);
                }
            })
        },
        "json",
        "post"
    );
}

